<template>
    <div>
        <el-table :data="list" border stripe>
      <el-table-column type="index" width="50" />
      <el-table-column prop="borrowAmount" label="借款额度" />
      <el-table-column prop="integralStart" label="积分区间开始" />
      <el-table-column prop="integralEnd" label="积分区间结束" />
      <el-table-column label="操作" >
        <template slot-scope = "scope"> <!--slot-scope = "scope"得到当前行的所有数据-->
            <router-link :to="'/core/integral-grade/edit/' + scope.row.id" style="margin-right:5px;" >
                <el-button type="primary" size="mini" icon="el-icon-edit">
                    修改
                </el-button>
            </router-link>
            <el-button type="danger" size = "mini" icon = "el-icon-delete" @click="removeById(scope.row.id)">删除</el-button>
            
        </template>
        </el-table-column>
    </el-table>
    </div>
</template>

<script>
import integralGradeApi from "@/api/core/integral-grade"
export default {
    data() {
        return {
            list: [],
        }
    },

    created() {
        this.fetchData();
    },

    methods: {
        // 查询所有积分等级列表
        fetchData() {
            integralGradeApi.list()
            .then(response => {
                this.list = response.data.list;
            })
        },

        // 根据Id删除积分等级列表
        removeById(id) {
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
            return integralGradeApi.removeById(id)
        })
        .then(response => {
                this.$message({
                type: 'success',
                message: '删除成功!'
          });
          this.fetchData();
        })
        .catch((error) => {
            if (error === "cancel") {
                this.$message({
                type: 'info',
                message: '已取消删除'
          });  
        }
                  
        });
      },
    }
}
</script>

<style scoped>

</style>